<script setup lang="ts">
defineOptions({
  name: "consumableItems"
});

import { ref, onMounted } from "vue";
import { WarnTriangleFilled, ToolsPx, ArrowRight } from "@px-ui/icons-vue";
import { useRouterStoreHook } from "@/store/modules/router";
import { queryEquipmentConsumableQuantity } from "@/api/modules/machine";
import signle from "@/assets/images/machine/signle.png";

const routeStore = useRouterStoreHook();
const loading = ref<boolean>(false);
const data = ref<Record<string, any>>({});
const floorData = ref<any>({
  type: "",
  typeName: "",
  name: "",
  floor: []
});
const itemList = ref([]);
const topData = ref<any>({});
const total = ref<any>(0);

const typeId = defineModel("typeId", { type: String, default: "" });
const emits = defineEmits(["typeIdChange", "selectChanged"]);
const props = defineProps({
  type: {
    type: String,
    default: ""
  }
});

const selectDeviceHandler = (typeId_: string) => {
  typeId.value = typeId_;
  emits("typeIdChange", typeId_);
};

// const queryEquipmentConsumableQuantityFn = async () => {
//   loading.value = true;
//   const className = routeStore.getSubject;
//   // 公司 写死 593
//   const typeId_ = "593";
//   // 厂内 写死 584
//   // const typeId_ = "584";
//   const queryDateStart = "";
//   const queryDateEnd = "";
//   const params = { className, devType: props.type, typeId: typeId_, queryDateStart, queryDateEnd };
//   let res = await queryEquipmentConsumableQuantity(params, () => {
//     loading.value = false;
//   });
//   data.value = res;
//   initItemList(res, props.type);
//   typeId.value = res.typeId;
//   selectDeviceHandler(res.typeId || typeId_);
//   loading.value = false;
// };

const initData = async (data: any, type: any) => {
  topData.value[type] = data.ffuCount;
  total.value = total.value + data.ffuCount;
  initItemList(data, type);
};

const initFloorData = (data: any) => {
  let newData = [];
  if (data && JSON.stringify(data) != "{}") {
    for (var i in data) {
      newData.push({
        name: i,
        count: data[i]
      });
    }
  }
  return newData;
};

const initCount = (data: any) => {
  let count = 0;
  if (data && JSON.stringify(data) != "{}") {
    for (var i in data) {
      count = count + Number(data[i]);
    }
  }
  return count;
};
// 整合库存/更换数据
const initItemList = (data: any, type: any) => {
  const { deviceCountByFilterAndArea, filterStorageByTypeName } = data;
  if (deviceCountByFilterAndArea && JSON.stringify(deviceCountByFilterAndArea) != "{}") {
    for (var i in deviceCountByFilterAndArea) {
      itemList.value.push({
        type: type,
        typeName: i.split(":")[0],
        name: i.split(":")[1],
        storage: filterStorageByTypeName[i.split(":")[1]],
        count: initCount(deviceCountByFilterAndArea[i]),
        floor: initFloorData(deviceCountByFilterAndArea[i])
      });
    }
    floorData.value = itemList.value[0];
    emits("selectChanged", floorData.value);
  } else if (filterStorageByTypeName && JSON.stringify(filterStorageByTypeName) != "{}") {
    for (var i in filterStorageByTypeName) {
      itemList.value.push({
        type: type,
        typeName: i,
        name: i,
        storage: filterStorageByTypeName[i],
        count: initCount(filterStorageByTypeName[i]),
        floor: initFloorData(filterStorageByTypeName[i])
      });
    }
    floorData.value = itemList.value[0];
    emits("selectChanged", floorData.value);
  }
};
// 切换设备
const handleSelect = (item: any) => {
  floorData.value = item;
  emits("selectChanged", item);
};

// onMounted(async () => {
//   await queryEquipmentConsumableQuantityFn();
// });

defineExpose({
  initData
});
</script>

<template>
  <div v-if="props.type == 'MAU'" class="topLine">
    <div class="itemBox">
      <div class="label">MAU总台数：</div>
      <div class="valueAll">{{ total }}台</div>
    </div>
    <!-- <div v-for="item in data?.consumableQuantityList" :key="item.model" class="itemBox">
      <div class="label">{{ item.model }}</div>
      <div class="value">{{ item.expiryWarningQuantity }}台</div>
    </div> -->
    <div class="itemBox">
      <div class="label">MAU粉尘过滤器更换：</div>
      <div class="value">{{ topData?.MAU }}台</div>
    </div>
    <div class="itemBox">
      <div class="label">MAU化学过滤器更换：</div>
      <div class="value">{{ topData?.MAU2 }}台</div>
    </div>
    <div class="itemBox">
      <div class="label">卷轴过滤器：</div>
      <div class="value">{{ topData?.MAU3 }}台</div>
    </div>
  </div>
  <div v-if="props.type == 'GHVAC'" class="topLine">
    <div class="itemBox">
      <div class="label">GHVAC总台数：</div>
      <div class="valueAll">{{ total }}台</div>
    </div>
    <!-- <div v-for="item in data?.consumableQuantityList" :key="item.model" class="itemBox">
      <div class="label">{{ item.model }}</div>
      <div class="value">{{ item.expiryWarningQuantity }}台</div>
    </div> -->
    <div class="itemBox">
      <div class="label">NMAU：</div>
      <div class="value">{{ topData?.NMAU }}台</div>
    </div>
    <div class="itemBox">
      <div class="label">AHU：</div>
      <div class="value">{{ topData?.AHU }}台</div>
    </div>
  </div>
  <div v-if="props.type == 'PCW'" class="topLine">
    <div class="itemBox">
      <div class="label">PCW总台数：</div>
      <div class="valueAll">{{ total }}台</div>
    </div>
    <!-- <div v-for="item in data?.consumableQuantityList" :key="item.model" class="itemBox">
      <div class="label">{{ item.model }}</div>
      <div class="value">{{ item.expiryWarningQuantity }}台</div>
    </div> -->
    <div class="itemBox">
      <div class="label">PCW：</div>
      <div class="value">{{ topData?.PCW }}台</div>
    </div>
  </div>
  <div class="centerLine">
    <div class="currentBox">
      <div class="title">当前：{{ floorData.typeName }}</div>
      <div class="desc">{{ floorData.name }}</div>
    </div>
    <div v-for="(item, index) in floorData.floor" :key="index" class="fBox">
      <div class="top">{{ item.name }}</div>
      <div class="bottom">{{ item.count }}</div>
    </div>
  </div>
  <div class="bottomLine">
    <div v-for="(item, index) in itemList" :key="index" class="itemContent" @click="handleSelect(item)">
      <div class="title">{{ item.typeName }}</div>
      <div class="bottom">
        <div class="left">
          <div class="name">{{ item.name }}</div>
          <div class="info">
            <span class="quantity" :style="{ color: item.storage < 20 ? 'red' : '#333' }">{{
              `库存：${item.storage || "--"}
              件`
            }}</span>
            <px-icon v-if="item.storage < 20" class="warn">
              <WarnTriangleFilled />
            </px-icon>
          </div>
        </div>
        <div class="right">
          <img v-if="item.count != 0" :src="signle" class="signle" />
          <span class="warnNum" :style="{ color: item.count != 0 ? 'red' : '#000' }">
            <span class="fontBig" :style="{ color: item.count != 0 ? 'red' : '#000' }">{{ item.count }}</span>
            台</span
          >
          <px-icon v-if="item.count != 0" class="right">
            <ArrowRight />
          </px-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topLine {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: auto;
  overflow-y: auto;

  .itemBox {
    display: flex;
    flex-flow: row nowrap;
    margin-right: 49px;

    .label {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: rgb(0 0 0 / 50%);
    }

    .valueAll {
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      color: rgb(0 0 0 / 80%);
    }

    .value {
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      color: #ef4444;
    }
  }
}

.centerLine {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: auto;
  margin-top: 16px;

  .currentBox {
    padding: 3px 8px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;

    .title {
      width: 100%;
      font-size: 12px;
      font-weight: 400;
      line-height: 17px;
      color: rgb(0 0 0 / 80%);
      text-align: center;
    }

    .desc {
      width: 100%;
      margin-top: 3px;
      font-size: 12px;
      font-weight: 400;
      line-height: 17px;
      color: rgb(0 0 0 / 40%);
      text-align: center;
    }
  }

  .fBox {
    width: 116px;
    height: 46px;
    margin-left: 2px;
    background: #3b82f6;
    border: 1px solid #dcdcdc;
    border-radius: 4px;

    .top {
      width: 100%;
      height: 23px;
      font-size: 14px;
      font-weight: 500;
      line-height: 23px;
      color: rgb(0 0 0 / 80%);
      text-align: center;
      background-color: #fff;
    }

    .bottom {
      width: 100%;
      height: 23px;
      font-size: 14px;
      font-weight: 500;
      line-height: 23px;
      color: #fff;
      text-align: center;
      background-color: #3b82f6;
    }
  }
}

.bottomLine {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: auto;

  .itemContent {
    width: 276px;
    height: auto;
    margin-top: 18px;
    margin-right: 14px;
    margin-bottom: 24px;
    cursor: pointer;
    border: 1px solid #dfdfdf;
    border-radius: 5px;

    .title {
      width: 100%;
      height: 36px;
      font-size: 14px;
      font-weight: 500;
      line-height: 36px;
      color: rgb(0 0 0 / 80%);
      text-align: center;
      background: #e7eefb;
    }

    .bottom {
      box-sizing: border-box;
      display: flex;
      flex-flow: row nowrap;
      width: 100%;
      height: 79px;

      .left,
      .right {
        width: 50%;
        height: 100%;
      }

      .left {
        .name {
          width: 100%;
          margin-top: 13px;
          font-size: 14px;
          font-weight: 500;
          color: rgb(0 0 0 / 80%);
          text-indent: 12px;
        }

        .info {
          display: flex;
          flex-flow: row nowrap;
          width: calc(100% - 12px);
          margin-top: 10px;
          margin-left: 12px;

          .quantity {
            font-size: 14px;
            font-weight: 400;
            color: rgb(0 0 0 / 80%);
          }

          .warn {
            margin: 3px 0 0 8px;
            font-size: 16px;
            color: red;
          }
        }
      }

      .right {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        background-color: #fee;

        .signle {
          position: absolute;
          top: 32px;
          left: 14px;
          width: 20px;
          height: 14px;
        }

        .warnNum {
          display: flex;
          flex-flow: row nowrap;
          margin-top: 28px;
          font-size: 14px;
          font-weight: 500;
          color: #f00;

          .fontBig {
            margin-top: -8px;
            margin-left: 60px;
            font-size: 24px;
            font-weight: 500;
            color: #f00;
          }
        }

        .right {
          font-size: 14px;
          color: #f00;
        }
      }
    }
  }
}
</style>
